<template>
	<view class="recomend bg-color">
		<view class="recomend-top" style="margin-bottom: 10rpx;">
			<image class="img-big" :src="recommendData[0].bigUrl" mode=""></image>
			<view class="recomend-item">
				<image v-for="(item,index) in recommendData[0].data" :key="index" class="img-little" :src="item.imgUrl"
					mode=""></image>

			</view>
		</view>
		<view class="recomend-top">
			<image class="img-big" :src="recommendData[1].bigUrl" mode=""></image>
			<view class="recomend-item">
				<image v-for="(k,i) in recommendData[1].data" :key="i" class="img-little" :src="k.imgUrl" mode="">
				</image>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "recommend",
		data() {
			return {

			};
		},
		props: {
			recommendData: {
				type: Array,
				default: () => []
			}
		}
	}
</script>

<style>
	.recomend {
		padding: 20rpx;
	}

	.recomend-top {
		width: 100%;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		border: 2rpx solid #CCCCCC;
		overflow: hidden;
	}

	.img-big {
		width: 100%;
		height: 300rpx;
	}

	.img-little {
		width: 33.333%;
		height: 240rpx;
	}

	.recomend-item {
		width: 100%;
		height: 240rpx;
	}
</style>